<template>
  <div class="app-container">
    <el-card class="max-w-500px">
      <div slot="header" class="clearfix flex">
        <el-input
          v-model="areaFilter"
          class="mr-10px"
          placeholder="请输入地区名称过滤"
          clearable
        />
        <el-button type="primary" @click="handleAdd()">
          新增地区
        </el-button>
      </div>
      <div class="h-[calc(100vh-245px)]">
        <el-scrollbar class="!h-[100%]">
          <el-tree
            class="area-tree"
            ref="tree"
            :data="allAreaTree"
            :props="{
              children: 'children',
              label: 'label'
            }"
            :filter-node-method="filterNode"
            node-key="id"
            :expand-on-click-node="false"
            highlight-current
            border
            style="height: 100%;"
            v-loading="treeLoading"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span class="title">
                {{ data.title }}
              </span>
              <span class="operation">
                <el-button type="text" size="mini" @click="handleEdit(data)">
                  修改
                </el-button>
                <el-button @click="handleDelete(data)" type="text" size="mini">
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-scrollbar>
      </div>
    </el-card>
    <KiFormDialog
      v-if="areaModel.show"
      :show.sync="areaModel.show"
      :title="areaModel.title"
      v-model="areaModel.data"
      :submit="submitForm"
      ref="formRef"
    >
      <template #el-form>
        <el-form-item label="所属地区" prop="parentCode">
          <AllRegionSelect
            v-model="areaModel.data.parentCode"
            :props="{
              checkStrictly: true
            }"
            :level="2"
            placeholder="请选择所属地区"
          />
        </el-form-item>
        <el-form-item label="地区名称" prop="name" verify>
          <el-input
            v-model="areaModel.data.name"
            placeholder="请输入地区名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="地区code" prop="code" :verify="{ length: 12 }">
          <el-input
            v-model="areaModel.data.code"
            placeholder="请输入地区code"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="经度"
          prop="longitude"
          :verify="(rule, val, callback) => { 
            if(!/^[1-9]\d?\d\.\d{2,12}$/.test(val)) { 
              callback('请输入正确的经度') 
            } else { callback() } 
          }"
        >
          <el-input
            v-model="areaModel.data.longitude"
            placeholder="请输入地区经度"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="纬度"
          prop="latitude"
          :verify="(rule, val, callback) => { 
            if(!/^[1-9]?\d\.\d{2,12}$/.test(val)) { 
              callback('请输入正确的纬度') 
            } else { callback() } 
          }"
        >
          <el-input
            v-model="areaModel.data.latitude"
            placeholder="请输入地区纬度"
            clearable
          />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  computed: {
    ...mapGetters(['allAreaTree'])
  },
  data () {
    return {
      treeLoading: false,
      treeData: [],
      areaModel: {
        show: false,
        title: '新增地区',
        data: {}
      },
      areaFilter: ''
    }
  },
  watch: {
    areaFilter (n) {
      this.$refs.tree.filter(n)
    }
  },
  methods: {
    ...mapActions({
      getAllArea: 'sys/getAllArea'
    }),
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleAdd () {
      this.areaModel.title = '新增地区'
      this.areaModel.show = true
      this.areaModel.data = {
        parentCode: '',
        name: '',
        code: '',
        latitude: '',
        longitude: ''
      }
    },
    handleEdit (item) {
      this.areaModel.title = '编辑地区'
      this.areaModel.show = true
      this.areaModel.data = {
        parentCode: item.parentId,
        name: item.label,
        code: item.id,
        latitude: item.latitude,
        longitude: item.longitude
      }
    },
    getArea () {
      this.treeLoading = true
      this.getAllArea().finally(_ => {
        this.treeLoading = false
      })
    },
    submitForm () {
      return this.$POST(
        `sot-admin-api/sys/area/${
          this.areaModel.title == '新增地区' ? 'create' : 'update'
        }`,
        this.areaModel.data
      ).then(res => {
        if (res.errorCode == '00000') {
          this.$swal.success('提交成功')
          // 重新获取地区树
          this.getArea()
        } else {
          this.$swal.error(res.message)
        }
      })
    },
    // 删除
    handleDelete (row) {
      this.$prompt(
        `删除后可能会导致不可预知的错误，您确认要删除吗？请输入 <b style="color:#f78989;user-select: none;">${row.label}</b> 确认删除`,
        '重要提示',
        {
          dangerouslyUseHTMLString: true,
          type: 'warning',
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          inputPlaceholder: `请输入${row.label}确认删除`,
          confirmButtonClass: 'el-button--danger',
          inputValidator (b) {
            if (!b) {
              return '请输入地区名称'
            }
            if (b !== row.title) {
              return '请输入正确的地区名称'
            }
            return true
          }
        }
      ).then(({ value }) => {
        this.$POST('sot-admin-api/sys/area/delete', {
          id: row.id
        }).then(res => {
          if (res.errorCode == '00000') {
            this.$swal.success('删除成功')
            this.getArea()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss">
.area-tree {
  .el-tree-node__content {
    display: felx;
    height: auto;
    .el-tree-node__expand-icon {
      font-size: 16px;
    }
    .is-leaf {
      font-size: 0;
    }
    .custom-tree-node {
      display: flex;
      flex: 1;
      font-size: 14px;
      line-height: 45px;
      border-bottom: 1px solid #ebeef5;
      .title {
        flex: 1;
      }
      .operation {
        padding-right: 15px;
      }
    }
  }
}
</style>
